<template>
  <div>
    <Card style="margin-bottom:20px;">
      <Form :model="problemForm" ref="problemForm" :rules="rules" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Input placeholder="问题件编码" v-model="problemForm.problemFileId" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="保单号" v-model="problemForm.contno" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="投保人姓名" v-model="problemForm.appntName" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="problemForm.sellType" placeholder="子渠道" clearable>
                <Option
                  v-for="item in subnameList"
                  :key="item.value"
                  :value="item.value"
                >{{item.value}}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <DatePicker
                v-model="problemForm.sendDate"
                type="daterange"
                placeholder="推送时间段"
                :editable="false"
                style="width:100%"
                @on-change="changeRange"
              ></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select v-model="problemForm.workState" placeholder="工作状态" clearable>
                <Option
                  v-for="item in workStateList"
                  :key="item.key"
                  :value="item.key"
                >{{item.value}}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <Button
            type="primary"
            @click="pageSubmit(problemForm,1)"
            style="margin-right:20px"
            :loading="queryLoading"
          >查询</Button>
          <Button @click="handleReset()">重置</Button>
        </Row>
      </Form>
    </Card>
    <Card>
      <Table
        :columns="chargeColumns"
        :data="chargeData"
        @on-selection-change="selectionChange"
      >
        <template slot-scope="{row}" slot="problemFileId">
          <span style="color:#2d8cf0;">
            {{row.problemFileId}}
          </span>
        </template>
        <template slot-scope="{row}" slot="customer">
          <span>
            {{row.customerServiceName + "-" + row.customerServiceId}}
          </span>
        </template>
        <template slot-scope="{row}" slot="workState">
          <span v-if="row.workState == '0'">
            <Button
              style="border-radius: 16px;background-color:rgb(255,141,26);color:#fff"
              size="small"
              @click="toDetail(row)"
            >未服务</Button>
          </span>
          <span v-if="row.workState == '1'">
            <Button
              style="border-radius: 16px;background-color:rgb(67,207,124);color:#fff"
              size="small"
              @click="toDetail(row)"
            >已完成</Button>
          </span>
        </template>
      </Table>
      <Page
        :total="total"
        show-sizer
        show-total
        style="text-align:right;margin-top:20px"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        :page-size-opts="pageSizeOptions"
        :current="pageIndex"
        :page-size="pageSize"
        transfer
      ></Page>
    </Card>
  </div>
</template>
<script>
export default {
  data(){
    return {
      problemForm:{
        problemFileId:'',
        contno:'',
        appntName:'',	//投保人姓名
        sellType:'',	//子渠道
        sendMinDate:'',	//推送日期起期
        sendMaxDate:'',	//推送日期止期
        workState:'',
        sendDate:[]
      },
      subnameList:[],
      workStateList:[
        {key:0,value:'未服务'},
        {key:1,value:'已完成'}
      ],
      queryLoading: false,
      chargeData:[],
      pageIndex:1,
      pageSize:10,
      pageSizeOptions: [5, 10, 15, 20],
      total:10,
      selection: [],
      selectLength: "0",
      //表格
      chargeColumns: [
        // {
        //   type: "selection",
        //   align: "center",
        //   fixed: "left",
        //   width: 60
        // },
        {
          title: "问题件编号",
          key: "problemFileId",
          slot:"problemFileId",
          width: "200",
          fixed: "left",
          align: "center",
        },
        {
          title: "保单号",
          key: "contno",
          width: "200",
          align: "center",
          fixed: "left"
        },
        {
          title: "子渠道",
          key: "selltype",
          width: "160",
          align: "center"
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: "160"
        },
        {
          title: "发起人",
          align: "center",
          width: "180",
          sortable: true,
          sortable: "paytodate",
          slot:"customer"
        },
        {
          title: "推送时间",
          key: "sendTime",
          align: "center",
          width: "200",
          sortable: true,
          sortable: "sendTime"
        },
        {
          title: "完成时间",
          key: "finishTime",
          align: "center",
          width: "200",
          sortable: true,
          sortable: "finishTime"
        },
        {
          title: "工作状态",
          key: "workState",
          align: "center",
          minWidth: 120,
          slot: "workState",
          // fixed: "right",
          sortable: "custom"
        },
      ],
    }
  },
  methods:{
    // 重置表单
    handleReset(){
      this.problemForm = {
        problemFileId:'',
        contno:'',
        appntName:'',	//投保人姓名
        sellType:'',	//子渠道
        sendMinDate:'',	//推送日期起期
        sendMaxDate:'',
        sendDate:[],
      }
    },
    // 查询
    pageSubmit(form,index,flag){
      let obj = {
        index:index,
        pageSize:this.pageSize,
        problemFileId:form.problemFileId,
        contno:form.contno,
        appntName:form.appntName,	//投保人姓名
        sellType:form.sellType,	//子渠道
        sendMinDate:form.sendMinDate,	//推送日期起期
        sendMaxDate:form.sendMaxDate,
        workState:form.workState
      }
      this.api.selectAllProblemFile(obj).then((res) => {
        if (res.code===200) {
          if(res.data.total!=0){
            this.total = res.data.total;
            this.chargeData = res.data.records;
          }else{
            if(!flag){
              this.$Message.info('查询数据为空')
              this.chargeData = []
            }
          }
        }
      })
    },
    // 表格选中
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },
    // 修改推送时间段
    changeRange(value){
      this.problemForm.sendMinDate = value[0]
      this.problemForm.sendMaxDate = value[1]
    },
    // 跳转详情
    toDetail(row){
      let obj  = {
        index:this.pageIndex,
        pageSize:this.pageSize,
      }
      sessionStorage.setItem("INSURANCE_TYPE2", "问题件");
      sessionStorage.setItem("PROBLEMOBJ2", JSON.stringify(this.problemForm));
      sessionStorage.setItem("PAGEOBJ2", JSON.stringify(obj));
      this.$router.push({
        // name: "serviceDetail",
        path: "serviceDetail",
        query: {
            row: row,
            insuranceType: "problem"
          }
        });
    },
    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit(this.problemForm,pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit(this.problemForm,1);
    },
    changeSaleChannel(){
    //   $.ajax("scrm-gateway/scrm-uer/api/plan/selectsubchannel/04", {
    //       method: "get",
    //       contentType: "application/json;charset=utf-8",
    //       headers: {
    //         Authorization: sessionStorage.getItem("credentials")
    //       },
    //       success: res => {
    //         if (res.code == 200 && res.data != null) {
    //           let obj = {}
    //           res.data = res.data.reduce((cur,next) => {
    //             obj[next.value] ? "" : obj[next.value] = true && cur.push(next);
    //             return cur;
    //           },[])
    //           this.subnameList = res.data
    //         } else {
    //           this.subnameList = [];
    //         }
    //       },
    //       error: res => {
    //         this.$Message.error(res.msg);
    //       }
    //     });
    },
  },
  created(){
    
  },
  mounted(){
    if (sessionStorage.getItem("INSURANCE_TYPE2") == "问题件") {
      if (sessionStorage.getItem("PROBLEMOBJ2")) {
        // 二次筛选条件
        this.problemForm = JSON.parse(sessionStorage.getItem("PROBLEMOBJ2"))
        this.pageIndex = JSON.parse(sessionStorage.getItem("PAGEOBJ2")).index || '1'
        this.pageSize = JSON.parse(sessionStorage.getItem("PAGEOBJ2")).pageSize
        sessionStorage.removeItem("PROBLEMOBJ2");
        sessionStorage.removeItem("PAGEOBJ2");
      }
    }
    this.changeSaleChannel()
    this.pageSubmit(this.problemForm,this.pageIndex);
  },
}
</script>